<template>
  <div class="relative h-full page-templateView">
    <filter-view @update-list="() => getActiveList()" />
    <div v-if="state.loading" class="flex items-center justify-center w-full h-[50%]">
      <a-spin :spinning="state.loading" size="large" tip="加载中..." />
    </div>
    <template v-else>
      <template v-if="state.publishList?.length ?? 0 > 0">
        <module-list :list="state.publishList" v-if="!statusState.isActiveModule" @updateList="() => getActiveList()" />
        <normal-list :list="state.publishList" v-else @updateList="() => getActiveList()" />
      </template>
      <div v-else>
        <loading-outlined v-if="state.loading" class="text-[#0083FF] loading-center" />
        <NoData v-else />
      </div>
    </template>
    <a-pagination
      show-size-changer
      :defaultPageSize="10"
      :pageSizeOptions="['10', '20', '50', '100']"
      :show-total="(total:number)=>`共${total}条`"
      :total="queryState.total"
      @change="handlePaginationChange"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import ModuleList from './components/ModuleList.vue'
import NormalList from './components/NormalList.vue'
import FilterView from './components/FilterView.vue'
import type { TemplateItem } from '@/types/template/published'
import { templateState, statusState, resetState } from './state'
import NoData from './components/NoData.vue'
import apis from '@/apis'
import { storage } from '@/utils/storage'
const {
  template: { template_list }
} = apis

interface IState {
  loading: boolean
  publishList: TemplateItem[]
  disableList: TemplateItem[]
}
const state = reactive<IState>({
  publishList: [],
  disableList: [],
  loading: false
})
const queryState = reactive({
  offset: 0, // 默认当前页数
  limit: 10, // 默认当前页显示数据的大小
  total: 0 // 总数，必须先有
})
/**
 * 分页改变事件
 */
const handlePaginationChange = (size: number, limit: number): void => {
  console.log('size: ', size, limit)
  queryState.limit = limit
  queryState.offset = (size - 1) * limit
  getActiveList()
}
//启用中接口
const getActiveList = () => {
  // 更新列表接口
  // if (!templateState.site_id) templateState.site_id = undefined
  // 启用中列表
  state.loading = true
  templateState.user_id = storage.get('user').user.admin_id
  template_list({ ...templateState, ...queryState })
    .then((res: any) => {
      console.log('res: ', res)
      state.publishList = res?.list ?? []
      queryState.total = +res?.total ?? 0
      state.loading = false
      //处理下一页，第一条删除问题
      if (queryState.offset >= (res?.list ?? 0) && queryState.total != 0) {
        queryState.offset -= queryState.limit
        template_list()
      }
    })
    .catch(() => {
      state.loading = false
    })
}
onMounted(() => {
  resetState()
  getActiveList()
})
</script>

<style lang="less" scoped>
.loading-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.page-templateView {
  padding: 16px 0;
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #0083ff;
    text-shadow: 0 0 0.25px currentcolor;
  }

  :deep(ant-tabs-nav-wrap) {
    width: auto;
    border-bottom: 1px solid #fff;
  }

  :deep(.ant-tabs-nav) {
    width: 152px;
  }

  :deep(ant-tabs-nav-list) {
    border-bottom: 1px solid #f1f1f1;
  }
}
</style>
